<template>
	<div :class="'logo-container-' + layout">
		<router-link to="/">
			<!-- 这里是logo变更的位置 -->
			<!-- <vab-remix-icon v-if="logo" class="logo" :icon-class="logo" /> -->
			<!-- <span
        class="title"
        :class="{ 'hidden-xs-only': layout === 'horizontal' }"
        :title="title"
      >
        {{ title }}
      </span> -->
			<img src="/static/img/logo2.png" class="title" :class="{ 'hidden-xs-only': layout === 'horizontal' }"
				:title="title" style="height: 45px" />
		</router-link>
	</div>
</template>
<script>
	export default {
		name: "VabLogo",
		components: {
		},
		data() {
			return {};
		},
		computed: {
			title() {
				return this.$store.state.shortName;
			},
			logo() {
				return this.$store.state.settings.logo;
			},
			layout() {
				return this.$store.state.theme.layout;
			},
		},
	};
</script>
<style lang="scss" scoped>
	@import "@/css/variables.scss";

	@mixin container {
		position: relative;
		height: $base-top-bar-height;
		overflow: hidden;
		line-height: $base-top-bar-height;
		background: $base-menu-background;
	}

	@mixin logo {
		display: inline-block;
		width: 28px;
		height: 28px;
		margin-right: 3px;
		color: $base-title-color;
		vertical-align: middle;
	}

	@mixin title {
		display: inline-block;
		overflow: hidden;
		font-size: 18px;
		line-height: 55px;
		color: $base-title-color;
		text-overflow: ellipsis;
		white-space: nowrap;
		vertical-align: middle;
	}

	.logo-container-horizontal {
		@include container;

		.logo {
			@include logo;
		}

		.title {
			@include title;
		}
	}

	.logo-container-vertical {
		@include container;

		height: $base-logo-height;
		line-height: $base-logo-height;
		text-align: center;

		.logo {
			@include logo;
		}

		.title {
			@include title;

			max-width: calc(#{$base-left-menu-width} - 60px);
		}
	}
</style>
